<template>
    <el-row>
        <el-col :span="12">
            <el-card style="width: 800px;">
                <div id="top5DnameAndCountDiv" style="width: 600px;height: 450px;"></div>
                <div id="top5PnameAndCountDiv" style="width: 600px;height: 450px;"></div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
import loginApi from "@/api/loginApi";

//定义函数显示图表
function chart01() {
    loginApi.top5().then(resp => {
        let data = new Array();
        let count = new Array();

        for (let index = 0; index < resp.data.length; index++) {
            data.push(resp.data[index].dname);[[]]
            count.push(resp.data[index].count);
        }
        var myChart = echarts.init(document.getElementById('top5DnameAndCountDiv'));
        var option = {
            title: {
                text: '前5的部门和人数',
                textStyle: {
                    color: '#000000',
                    fontweight: 'lighter'
                }
            },
            legend: {
                data: [`人数`],
                right: '10%',
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                    color: '#000000',
                }
            },
            xAxis: {
                data: data,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#000000',
                        width: 1
                    }
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#000000',
                        width: 1
                    }
                },splitLine: {
                    show: false
                }},
            series: [{
                name: '人数',
                type: 'bar',
                data: count,
                barWidth: '50%',
            }]
        };
        myChart.setOption(option);
    });
    
}
onMounted(() => {
    chart01();
});

function chart02() {
            loginApi.top5Pname().then(resp => {
                let data = new Array();
                let count = new Array();

                for (let index = 0; index < resp.data.length; index++) {
                    data.push(resp.data[index].pname);
                    count.push(resp.data[index].count);
                }
                var myChart = echarts.init(document.getElementById('top5PnameAndCountDiv'));
                var option = {
                    title: {
                        text: '维修总数前五的维修人员',
                        textStyle: {
                            color: '#000000',
                            fontWeight: 'lighter'
                        }
                    },
                    legend: {
                        data: [`维修项目总数`],
                        right: '10%',
                        itemWidth: 10,
                        itemHeight: 10,
                        textStyle: {
                            color: '#000000',
                        }
                    },
                    xAxis: {
                        data: data,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#000000',
                                width: 1
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#000000',
                                width: 1
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    series: [{
                        name: '维修项目总数',
                        type: 'line', // 改为折线图
                        data: count,
                    }]
                };
                myChart.setOption(option);
            });

        }
        onMounted(() => {
            chart02();
        });
</script>

<style scoped></style>